<template>
  <div class="home">
    <HomeHeader />
    <HomeSwiper :swiperList="swiperList"></HomeSwiper>
    <HomeIcons :iconsList="iconsList"></HomeIcons>
    <HomeLocation></HomeLocation>
    <HomeActivity></HomeActivity>
    <HomeHot :hotList="hotList"></HomeHot>
    <HomeLike :likeList="likeList"></HomeLike>
    <HomeVacation :vacationList="vacationList"></HomeVacation>
  </div>
</template>

<script>
import HomeHeader from "../home/pages/header.vue";
import HomeSwiper from "../home/pages/swiper.vue";
import HomeIcons from "../home/pages/icons.vue";
import HomeLocation from "./pages/location.vue";
import HomeActivity from "../home/pages/activity.vue";
import HomeHot from "../home/pages/Hot.vue";
import HomeLike from "../home/pages/like.vue";
import HomeVacation from "../home/pages/vacation.vue";
import { mapState } from "vuex";
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeActivity,
    HomeHot,
    HomeLike,
    HomeVacation,
  },
  data() {
    return {
      swiperList: [],
      iconsList: [],
      hotList: [],
      likeList: [],
      vacationList: [],
      changeCity: "",
    };
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    getHttp() {
      this.$http.get("/api/dataHome.json").then((res) => {
        const data = res.data.data;
        data.forEach((item, index) => {
          if (item.city == this.city) {
            this.swiperList = item.swiperList;
            this.iconsList = item.iconsList;
            this.hotList = item.hotList;
            this.likeList = item.likeList;
            this.vacationList = item.vacationList;
          }
        });
      });
    },
  },
  mounted() {
    this.changeCity = this.city;
    this.getHttp();
  },
  activated() {
    if (this.city != this.changeCity) {
      this.getHttp();
      this.changeCity = this.city;
    }
  },
};
</script>

<style>
.home {
  background: #f5f5f5;
}
</style>